import React from 'react';
import { View, Text } from '@ray-js/ray';
import { Cell, CellGroup, DialogInstance, Switch, ActionSheet } from '@ray-js/smart-ui';
import Strings from '../../i18n';
import styles from './index.module.less';

interface Props {
  onChange: (params: Record<string, any>) => void;
  dpId: string;
  dps: Record<string, any>;
  style?: React.CSSProperties;
  title?: string;
}

export default ({ style = {}, onChange, dpId, dps, title }: Props) => {
  const onClick = v => {
    onChange &&
      onChange({
        ...dps,
        [dpId]: v,
      });
  };

  const list = ['open', 'close'].map(item => ({
    name: Strings.getLang(item),
    id: item,
    checked: item === dps[dpId],
    className: styles.actionSheetItem,
  }));
  console.log(`🚀 ~  dps[dpId],:`, dps[dpId]);

  const onCancel = () => setShow(false);
  const onClose = () => setShow(false);
  const onSelect = evt => {
    const { id } = evt.detail;
    console.log(`🚀 id`, id);

    onClick(id);
  };

  const [show, setShow] = React.useState(false);

  return (
    <View style={style ?? {}}>
      <Cell
        title={title ?? Strings.getLang('control')}
        customClass={styles.noteCell}
        value={Strings.getLang(dps[dpId])}
        onClick={() => {
          setShow(true);
        }}
      />
      <ActionSheet
        show={show}
        title={title ?? Strings.getLang('control')}
        actions={list}
        onClose={onClose}
        onSelect={onSelect}
        onCancel={onCancel}
        activeColor="#007AFF"
      />
    </View>
  );
};
